<template>
  <view class="page-container">
    <view class="page-header">
      <view class="page-title">小程序授权管理</view>
    </view>
    
    <uni-card title="授权说明" margin="10px 0">
      <text class="card-text">
        1. 商户需要创建自己的微信小程序，并获取AppID和AppSecret\n
        2. 在商户列表中，点击"小程序设置"来配置商户的小程序参数\n
        3. 配置成功后，商户的用户可以通过微信小程序登录系统\n
        4. 管理员可以随时禁用商户的小程序授权
      </text>
    </uni-card>
    
    <uni-card title="授权流程" margin="10px 0">
      <view class="process-steps">
        <view class="step">
          <view class="step-circle">1</view>
          <view class="step-text">商户注册微信小程序</view>
        </view>
        <view class="step-line"></view>
        <view class="step">
          <view class="step-circle">2</view>
          <view class="step-text">配置AppID和AppSecret</view>
        </view>
        <view class="step-line"></view>
        <view class="step">
          <view class="step-circle">3</view>
          <view class="step-text">设置小程序支付功能</view>
        </view>
        <view class="step-line"></view>
        <view class="step">
          <view class="step-circle">4</view>
          <view class="step-text">发布小程序上线</view>
        </view>
      </view>
    </uni-card>
    
    <uni-card title="授权列表" margin="10px 0">
      <uni-table border stripe emptyText="暂无授权数据">
        <uni-tr>
          <uni-th align="center">商户名称</uni-th>
          <uni-th align="center">小程序名称</uni-th>
          <uni-th align="center">AppID</uni-th>
          <uni-th align="center">状态</uni-th>
          <uni-th align="center">创建时间</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in miniappList" :key="index">
          <uni-td align="center">{{ item.tenant_name }}</uni-td>
          <uni-td align="center">{{ item.app_name }}</uni-td>
          <uni-td align="center">{{ item.appid }}</uni-td>
          <uni-td align="center">
            <uni-tag :text="item.status === 1 ? '正常' : '禁用'" :type="item.status === 1 ? 'success' : 'error'" />
          </uni-td>
          <uni-td align="center">{{ formatDate(item.created_at) }}</uni-td>
        </uni-tr>
      </uni-table>
    </uni-card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      miniappList: []
    };
  },
  onLoad() {
    this.loadMiniappList();
  },
  methods: {
    // 更新云函数调用方式
    async loadMiniappList() {
      try {
        const result = await uniCloud.callFunction({
          name: 'admin-tenant',
          data: {
            action: 'getAllMiniapps'
          }
        });
        
        if (result.result.code === 0) {
          this.miniappList = result.result.data || [];
        } else {
          uni.showToast({
            title: result.result.message || '获取授权列表失败',
            icon: 'none'
          });
        }
      } catch (e) {
        console.error(e);
        uni.showToast({
          title: '获取授权列表失败',
          icon: 'none'
        });
      }
    },
    
    // 格式化日期
    formatDate(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
    }
  }
}
</script>

<style>
.page-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: bold;
}

.card-text {
  white-space: pre-line;
  line-height: 1.8;
}

.process-steps {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #007aff;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-bottom: 8px;
}

.step-text {
  font-size: 12px;
  text-align: center;
  width: 100px;
}

.step-line {
  flex: 1;
  height: 2px;
  background-color: #007aff;
  margin: 0 5px;
  margin-bottom: 25px;
}
</style> 